
<template>
	<div class="book">
		<div class="search-check">
			
		    <div class="book-check-label">
		    	<p class="book-class">书籍分类：</p>
		    	<div class="book-check-btn">
		    		<button @click="checkbg($event)" class="active" ref="checkall">全部</button>
					<button @click="checkbg($event)" v-for="tab in checks" class="no-active" ref="check">{{tab.item}}</button>
			
		    	</div>
					
			</div>
		</div>
		<div class="book-content">
		    <ul class="book-content-list">
		    	<li v-for="book in books">
		    		<img class="book-img" :src="book[0]"/>
		    		<div class="book-details">
		    			<p class="bookname">书名：{{book[1]}}</p>
		    			<p class="bookauthor">作者：{{book[2]}}</p>
		    			<p class="book-intr">
		    				{{book[3]}}
		    			</p>
		    		</div>
		    		<span class="sign">{{book[4]}}</span>
		    	</li>
		    	
		    </ul>
			<div class="book-divi-page">
				<el-pagination
				  @current-change="bookCurrentChange"
				  :current-page="currentPage"
				  background
				  layout="prev, pager, next"
				  :page-size="8"
				  :total="allpage">
				</el-pagination>
				{{msg}}
			</div>	
		</div>
		
	</div>
</template>
<script>

export default{
		name:'Book',
		mounted(){
  		this.swipS()
    	},
		data(){
			return {
				
				 msg:'222',
				 Active:false,
				 checks:[
				   {item:'C'},
				   {item:'C++'},
				   {item:'Linux'},
				   {item:'JAVA'},
				   {item:'测试'}
				 ],
				 books:[],
				 allpage:'',
				 page:1,
				 kind:''
				}
			 
		},
		methods:{
	    	swipS(){
	    		let self = this;
	    		this.msg = '';
					this.$http({
						method:'get',
						url:'/Books/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded'
						},
						params:{
							Kind:'全部',
							Page:self.page,
						}
					}).then((response)=>{
							self.books = response.data[0];
							self.allpage = response.data[1];
						
					})
	    	},
	    	checkbg(event){
	    		
	    		for(let i=0;i<this.$refs.check.length;i++){
	    		 this.$refs.check[i].className='no-active'
	    		}
	    		this.$refs.checkall.className = "no-active";
	    		event.target.className = 'active';
	    		this.currentPage = 1;
	    		
	    		this.kind = event.target.innerHTML;
	    		let self = this;
	    		this.msg = '';
					this.$http({
						method:'get',
						url:'/Books/',
						headers:{
							'Content-Type':'application/x-www-form-urlencoded'
						},
						params:{
							Kind:self.kind,
							Page:self.page,
						}
					}).then((response)=>{
							self.books = response.data[0];
							self.allpage = response.data[1];
						
					})
		    },
		    bookCurrentChange(val){
		    	this.currentPage = val;
	    		let Page = this.currentPage;
	    		let self = this;
	    		console.log(this.currentPage)
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		if(this.kind==''){
	    			this.kind='全部';
	    		}
	    		this.$http({
					method:'get',
					url:'/Books/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Kind:self.kind,
						Page:Page
					}
				}).then((response)=>{
			      	self.books = response.data[0];
					self.allpage = response.data[1];
				})
		    }
        }
		
	}
</script>

<style>
	button:focus{
		outline: none;
	}
	.el-pagination button{
		height: 20px;
		line-height: 20px;
	}
	.book .el-pagination.is-background .el-pager li{
		min-height: 18px!important;
	}
	.el-pagination.is-background .el-pager li{
		min-width: 14px;
	}
	.el-pager li{
		height: 18px;
		line-height: 18px;
	}
	.book-class{
		position: absolute;
		left: 0;
		font-size: 13px;
		font-weight: bold;
		color: #00b9ff;
	}
	.book-check-btn{
		display: inline-block;
		position: absolute;
		left: 60px;
		
	}
	.book-check-btn button{
		width: 60px;
		height: 28px;
		margin-left: 5px;
		border: none;
		background: #e8e8e8;
		margin-bottom: 10px;
		color: #808080;
	}
	.search-check{
		width: 100%;
		text-align: center;
	}
	.book-check-label{
		width: 80%;
		position: relative;
		display: inline-block;
		height: 40px;
	}
	.book .book-divi-page{
		width: 100%;
		margin-top: 10px;
		margin-bottom: 10px;
		text-align: center;
		height: 50px;
	}
	.book .sign{
		position: absolute;
		top: 10px;
		right: 20px;
	}
	
	.book .book-details p{
		margin: 0;
	}
	.book .book-img{
		top: 10px;
		width: 25%;
		position: absolute;
		left: 10px;
	}
	.book .bookname{
		margin-top: 10px!important;
		margin-bottom: 5px!important;
	}
	.book .bookauthor{
		margin-bottom: 10px!important;
	}
	.book .book-details{
		position: absolute;
		top: 0;
		width: 70%;
		
		left: 25%;
		margin-left: 17px;
		text-align: left;
	}
	
	.book .active{
		background: -moz-linear-gradient(left,#20b8e9,#69e3d8)!important;
		background: -webkit-linear-gradient(left,#20b8e9,#69e3d8)!important;
		color: white;
	}
	.book .no-active{
		background: #f0f0f0;
		color: black;
	}
	.book .el-paginatio{
		font-weight: normal!important;
	}
	.book .tre-divi-page{
		width: 100%;
		text-align: center;
	}
	.book-intr{
		max-height:65px;
		overflow: hidden;
		padding-right: 10px;
	}
	
	.book{
		width: 100%;
		
		background: #f7f5f6;
		border: solid 1px #f7f5f6;
		position: relative;
		top: 80px;
		padding-top: 20px;
	}
	.book .book-content{
		width: 100%;
		text-align: center;
		min-height: 300px;
		
	}
	.book .book-content-list{
		list-style: none;
		margin-top: 30px;
		font-size: 12px;
		width: 80%;
		padding: 0;
		display: inline-block;
		min-height: 200px;
	}
	.book .book-content-list li{
		width: 100%;
		/*display: inline-block;
*/		min-height:130px;
		background: white;
		
	    margin-top: 15px;
	    padding-bottom: 0;
	    position: relative;
	}
	
	
</style>